<template>
    <div>
        <el-dialog title="库存物资选择" v-model="localVisible" @close="closeInventorySelectDialog" width="70%"
            @open="openInventorySelectDialog">
            <el-form :model="params" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="物资编码">
                            <el-input v-model="params.materialProductCode" placeholder="请输入产品物料编码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="物资名称">
                            <el-input v-model="params.materialProductName" placeholder="请输入产品物料名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="批次号">
                            <el-input v-model="params.inboundBatchNumber" placeholder="请输入批次号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="7">
                        <el-form-item label="仓库名称">
                            <el-input v-model="params.warehouseName" placeholder="请输入仓库名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="供应商编号">
                            <el-input v-model="params.supplierCode" placeholder="请输入供应商编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="供应商名称">
                            <el-input v-model="params.supplierName" placeholder="请输入供应商名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="6">
                    <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetField">重置</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData" @row-click="handleRowClick">
                <el-table-column label="产品物料编码" prop="materialProductCode" />
                <el-table-column label="产品物料名称" prop="materialProductName" />
                <el-table-column label="在库数量" prop="inventoryQuantity" />
                <el-table-column label="规格型号" prop="specificationAndModel" />
                <el-table-column label="入库批次号" prop="inboundBatchNumber" />
                <el-table-column label="供应商编号" prop="supplierCode" />
                <el-table-column label="供应商名称" prop="supplierName" />
                <el-table-column label="生产工单号" prop="productionOrder" />
                <el-table-column label="库存有效期" prop="validityPeriodOfInventory" />
            </el-table>

            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="ascertain">确定</el-button>
                    <el-button @click="closeInventorySelectDialog">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { findStock } from '@/apis/xms'
const props = defineProps({
    InventorySelect: Boolean
})

const params = ref({
    currentPage: 1,
    pageSize: 10,
    materialProductCode: null,
    materialProductName: null,
    inboundBatchNumber: null,
    warehouseName: null,
    supplierCode: null,
    supplierName: null
})
const tableData = ref([]) //表格数据
const pageResult = ref({}) //分页数据
const selectRow = ref(null)

// 创建本地状态来跟踪对话框的可见性
const localVisible = ref(props.InventorySelect);

// 监听父组件传递的prop变化，并同步到本地状态
watch(() => props.InventorySelect, (newValue) => {
    localVisible.value = newValue;
});

const emit = defineEmits(['update:InventorySelect','selectInventoryRow'])
const closeInventorySelectDialog = () => {
    // localVisible.value = false;
    emit('update:InventorySelect', false)
}

// 获取库存物资列表
const openInventorySelectDialog = async () => {
    pageResult.value = await findStock(params.value)
    tableData.value = pageResult.value.records
    selectRow.value = null
}


// 搜索查询数据
const handleSearch = async () => { 
    pageResult.value = await findStock(params.value)
    tableData.value = pageResult.value.records
}

// 重置查询参数
const resetField = () => {
    params.value = {
        currentPage: 1,
        pageSize: 10,
        materialProductCode: null,
        materialProductName: null,
        inboundBatchNumber: null,
        warehouseName: null,
        supplierCode: null,
        supplierName: null
    }
}

// 单击某一行
const handleRowClick = (row) => {
    selectRow.value = row
    // console.log("row数据",selectRow.value)
}
// 确定选中的产品物料
const ascertain = ()=>{
    emit('selectInventoryRow', selectRow.value)
    closeInventorySelectDialog()
}

</script>

<style scoped></style>
